<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/index.css">
   
</head>
<body>
    <!-- 一.头部登录区域 -->
    <div id="headLogin">
       <div class=" wrapper clearfix">
        <div class="fl">
            <img src="img/logo.jpg" alt="">
            <span>legochina.cn</span>
        </div>
        <div class="fr right">
            <p>欢迎光临<a>乐购</a>,</p>
            <p>请 登录\<a>注册</a></p>
        </div>
       </div>
    </div>

    <!-- 二.头部搜索区域 -->
    <div id="headSearch">
        <div class="wrapper">
            <!-- 1.左边logo -->
            <!-- <div class="logo fl"></div> -->
            <!-- 2.右边搜索栏 -->
            <div class="fl">
                <form action="#">
                    <input type="text" placeholder="请输入搜索的商品名" class="form_txt">
                    <button class="form_btn">
                        <!-- <a href="#"></a> -->
                    </button>
                </form>
            </div>
            <!-- 两个按钮 -->
            <div class="fl">
                <span class="span1"><p>购物车3</p></span>
                <span class="span2">我的订单</span>
            </div>
            <!-- 下面导航区域 -->
            <ul class="bottom_nav fl">
                <li><a href="#">图书</a> </li>
                <li><a href="#">电子书</a> </li>
                <li><a href="#">原创文学</a> </li>
                <li><a href="#">服装</a> </li>
                <li><a href="#">运动户外</a> </li>
                <li><a href="#">孕婴童</a> </li>
                <li><a href="#">家具</a> </li>
                <li><a href="#">创意文具</a> </li>
                <li><a href="#">地方特产</a> </li>
                <li><a href="#">海外购</a> </li>
                <li><a href="#">电器城</a> </li>
            </ul>
        </div>
    </div>

    <!-- 三.轮播图区域 -->
    <div id="banner" class="wrapper">
        <!-- 1.左边导航栏 -->
        <ul class="nav fl">
            <li>
                <p class="p1">
                    <a href="#">图书丶</a>
                    <a href="#">电子书丶</a>
                    <a href="#">童书</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu cur">
                    <ul>
                        <li>
                            <div>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </div>
                        </li>
                        <li>
                            <h4><a href="#">文艺</a></h4>
                            <a href="#">小说</a>
                            <a href="#">文学</a>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </li>

            <li>
                <p>
                    <a href="#">服饰丶</a>
                    <a href="#">内衣</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">鞋靴丶</a>
                    <a href="#">箱包</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">运动户外</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">孕丶</a>
                    <a href="#">婴丶</a>
                    <a href="#">童</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">家居丶</a>
                    <a href="#">家纺丶</a>
                    <a href="#">汽车</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">家居丶</a>
                    <a href="#">家庭丶</a>
                    <a href="#">康体</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">美妆丶</a>
                    <a href="#">个人护体丶</a>
                    <a href="#">成人</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">食品丶</a>
                    <a href="#">茶品丶</a>
                    <a href="#">生鲜</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">腕表丶</a>
                    <a href="#">珠宝丶</a>
                    <a href="#">眼镜</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">手机丶</a>
                    <a href="#">数码丶</a>
                    <a href="#">电脑办公</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">家用电器丶</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>
            <li>
                <p>
                    <a href="#">鞋靴丶</a>
                    <a href="#">箱包</a>
                </p>
                <!-- 隐藏菜单 -->
                <div class="menu">2.辣鸡一刀切</div>
            </li>

        </ul>

        <!-- 2.右边轮播图区域 -->
        <div class="sliderbox">
            <!-- 轮播图 -->
                <div class="imgbox">
                        <img src="img/pp1_05.jpg" alt="" class="curimg">
                        <img src="imgs/2.png" alt="">
                        <img src="imgs/3.png" alt="">
                        <img src="imgs/4.jpg" alt="">
                </div>
                
            <!-- 小圆点 -->
                <div class="btns">
                    <a class="active"></a>
                    <a></a>
                    <a></a>
                    <a></a>
                </div>
            
            <!-- 左箭头 -->
                <a class="arrowLeft">
                        <
                </a>
            <!-- 右箭头 -->
                <a class="arrowRight">
                        >
                </a>
            </div>
    </div>



    <!-- 四.每日好货推荐 -->
    <div id="recommend">
        <div class="wrapper">
            <!-- 1.头部 -->
            <div class="recommend_head">
                <h1 class="fsize-24">乐购~今日推荐</h1>
            </div>

            <!-- 2.商品区 -->
            <div class="recommend_shop">
                <ul>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                    <li>
                        <div  class="img1"><img src="img/index06_05.jpg" alt=""></div>
                        <img src="img/index05_18.jpg" alt="">
                        <div class="money">
                            <h3 class="fsize-13"><a href="#">黑爵青蜂侠六键电竞游戏鼠标</a></h3>
                            <p class="fsize-13"><a href="#">全国联保 一年免费包换</a></p>
                            <span class="fsize-24">￥:299</span>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <!-- 五.图书，电子书区域 -->
    <div id="book">
       <div class="wrapper">
           <!-- 左边选项卡 -->
        <div class="book_left fl">
            <div class="tab">
                <!-- 上面导航 -->
                <h1 class="fsize-28 fl">图书，电子书</h1>
                <ul class="fr clearfix">
                    <li class="active">最新上架</li>
                    <li>独家畅销</li>
                    <li>电子书</li>
                </ul>
                <!-- 下面内容 -->
                <div class="con">
                    <p class="cur">p1</p>
                    <p>p2111111</p>
                    <p>p3</p>
                </div>
            </div>
        </div>
        <!-- 右边图书 -->
        <div class="book_right fr">

        </div>
       </div>
    </div>

    <!-- 六.服装-->
    <div id="table">
        <div class="wrapper">
            <!-- 左边选项卡 -->
             <div class="tab clearfix">
                 <!-- 上面导航 -->
               <div class="clearfix">
                <h1 class="fsize-28 fl">服装</h1>
                <ul class="clearfix fr ">
                    <li class="active">女装内衣</li>
                    <li>热销男装</li>
                    <li>精品鞋靴</li>
                </ul>
               </div>
                 <!-- 下面内容 -->
                 <div class="con">
                     <div class="p cur">
                             
                             <span class="con_left fl">
                                <img src="img/index7_17.jpg" alt="" height="350px">
                                <ul>
                                    <li>是否</li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                             </span>
                             <span class="con_center fl">
                                <img src="img/index7_17.jpg" alt="" height="350px">
                             </span>
                             <span class="con_right fr">
                                <img src="img/index7_17.jpg" alt="" height="350px">
                             </span>
                     </div>
                     <div class="p">p2</div>
                     <div class="p">p3</div>
                 </div>
             </div>
        </div>
     </div>













    <!-- footer---页脚--公共组件 -->
    <div id="footer">
        <!-- 1.上面部分 -->
        <div class="footer_head">
            <div class="wrapper">
                <ul>
                    <li>
                        <img src="img/222_11.png" alt="">
                    </li>
                    <li>
                        <img src="img/222_13(1).png" alt="">
                    </li>
                    <li>
                        <img src="img/222_15.png" alt="">
                    </li>
                    <li>
                        <img src="img/222_17.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <!-- 2.下面内容部分 -->
        <div class="footer_content clearfix">
            <div class="wrapper">
                <div class="one fl">
                    <ul>
                        <li class="fsize-16"><h1>购物指南</h1></li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">发票制度</a></li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">会员优惠</a></li>
                    </ul>
                </div>

               <div class="left fl">
                <ul>
                    <li class="fsize-16"><h1>支付方式</h1></li>
                    <li><a href="#">货到付款</a></li>
                    <li><a href="#">网上支付</a></li>
                    <li><a href="#">礼品卡支付</a></li>
                    <li><a href="#">银行转帐</a></li>
                </ul>
               </div>

               <div class="left fl">
                <ul>
                    <li class="fsize-16"><h1> 订单服务</h1></li>
                    <li><a href="#">订单配送查询</a></li>
                    <li><a href="#">订单状态说明</a></li>
                    <li><a href="#">自助取消订单</a></li>
                    <li><a href="#">自助修改订单</a></li>
                </ul>
               </div>
               <div class="left fl">
                <ul>
                    <li class="fsize-16"><h1>退换货</h1></li>
                    <li><a href="#">退换货政策</a></li>
                    <li><a href="#">自助申请退换货</a></li>
                    <li><a href="#">退换货进度查询</a></li>
                    <li><a href="#">退款方式和时间</a></li>
                </ul>
               </div>

               <div class="left fl">
                <ul>
                    <li class="fsize-16"><h1>商家服务</h1></li>
                    <li><a href="#">商家中心</a></li>
                    <li><a href="#">运营服务</a></li>
                    <li><a href="#">加入尾品汇</a></li>
                </ul>
               </div>

               <img src="img/logo_00.png" alt="">
            </div>
        </div>

        <!-- 3.下面部分：公司简介 -->
        <div class="footer_bottom clearfix">
           <div class="wrapper">
            <ul>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">Investor Relations</a> </li>
                <li><a href="#">网站联盟</a></li>
                <li><a href="#">乐购招商</a></li>
                <li><a href="#">机构销售</a></li>
                <li><a href="#">手机乐购</a></li>
                <li><a href="#">官方Blog</a></li>
                <li><a href="#">热词搜索</a></li>
            </ul>
           </div>
        </div>
        
        <div class="footer_bottom2">
                <a href="#">Copyright (C) 乐购网 2004-2016, All Rights Reserved</a>
        </div>
    </div>
    
    
    
   
    












    <script>
           
    </script>
    <script src="JS/index.js"></script>
</body>
</html>